<template>
  <view class="create-post-container">
    <!-- 头部 -->
    <view class="header">
      <view class="header-left">
        <text class="close-btn" @click="goBack">×</text>
      </view>
      <view class="header-center">
        <text class="title">发布帖子</text>
      </view>
      <view class="header-right">
        <text class="time">14:25</text>
      </view>
    </view>

    <!-- 选择版块 -->
    <view class="form-section">
      <text class="section-label">选择版块</text>
      <view class="input-field" @click="showSectionPicker">
        <text class="placeholder" v-if="!selectedSection">请选择版块</text>
        <text class="selected-text" v-else>{{ selectedSection }}</text>
        <text class="arrow">▼</text>
      </view>
    </view>

    <!-- 帖子内容 -->
    <view class="form-section">
      <text class="section-label">帖子内容</text>
      <textarea 
        class="content-textarea" 
        placeholder="分享你的经验、心得或问题..."
        v-model="postContent"
        maxlength="1000"
        show-confirm-bar="false"
      ></textarea>
    </view>

    <!-- 添加图片 -->
    <view class="form-section">
      <text class="section-label">添加图片 (最多9张)</text>
      <view class="image-upload-area" @click="chooseImage">
        <view class="upload-placeholder" v-if="images.length === 0">
          <text class="upload-icon">☁</text>
          <text class="upload-text">点击或拖拽图片到此处上传</text>
        </view>
        <view class="image-list" v-else>
          <view 
            class="image-item" 
            v-for="(image, index) in images" 
            :key="index"
          >
            <image :src="image" class="uploaded-image" mode="aspectFill"></image>
            <text class="delete-btn" @click="deleteImage(index)">×</text>
          </view>
          <view class="add-more-btn" @click="chooseImage" v-if="images.length < 9">
            <text class="add-icon">+</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 添加标签 -->
    <view class="form-section">
      <text class="section-label">添加标签</text>
      <view class="tags-container">
        <view class="tag-list">
          <view 
            class="tag-item" 
            v-for="(tag, index) in tags" 
            :key="index"
          >
            <text class="tag-text">{{ tag }}</text>
            <text class="tag-delete" @click="deleteTag(index)">×</text>
          </view>
        </view>
        <input 
          class="tag-input" 
          placeholder="输入标签后按回车"
          v-model="newTag"
          @confirm="addTag"
          @blur="addTag"
        />
      </view>
    </view>

    <!-- 发布按钮 -->
    <view class="publish-section">
      <button class="publish-btn" @click="publishPost">发布</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedSection: '',
      postContent: '',
      images: [],
      tags: [],
      newTag: '',
      sections: ['技术交流', '生活分享', '学习心得', '问题求助', '其他']
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    
    showSectionPicker() {
      uni.showActionSheet({
        itemList: this.sections,
        success: (res) => {
          this.selectedSection = this.sections[res.tapIndex]
        }
      })
    },
    
    chooseImage() {
      if (this.images.length >= 9) {
        uni.showToast({
          title: '最多只能上传9张图片',
          icon: 'none'
        })
        return
      }
      
      uni.chooseImage({
        count: 9 - this.images.length,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.images = [...this.images, ...res.tempFilePaths]
        }
      })
    },
    
    deleteImage(index) {
      this.images.splice(index, 1)
    },
    
    addTag() {
      if (this.newTag.trim()) {
        if (this.tags.includes(this.newTag.trim())) {
          uni.showToast({
            title: '标签已存在',
            icon: 'none'
          })
        } else {
          this.tags.push(this.newTag.trim())
        }
        this.newTag = ''
      }
    },
    
    deleteTag(index) {
      this.tags.splice(index, 1)
    },
    
    publishPost() {
      if (!this.selectedSection) {
        uni.showToast({
          title: '请选择版块',
          icon: 'none'
        })
        return
      }
      
      if (!this.postContent.trim()) {
        uni.showToast({
          title: '请输入帖子内容',
          icon: 'none'
        })
        return
      }
      
      // 这里可以添加发布逻辑
      uni.showLoading({
        title: '发布中...'
      })
      
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '发布成功',
          icon: 'success'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }, 2000)
    }
  }
}
</script>

<style scoped>
.create-post-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 头部样式 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #4CAF50;
  color: white;
  position: relative;
}

.header-left {
  flex: 1;
}

.close-btn {
  font-size: 40rpx;
  font-weight: bold;
}

.header-center {
  flex: 1;
  text-align: center;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
}

.header-right {
  flex: 1;
  text-align: right;
}

.time {
  font-size: 24rpx;
}

/* 表单区域 */
.form-section {
  margin: 30rpx;
  background-color: white;
  border-radius: 16rpx;
  padding: 30rpx;
}

.section-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  font-weight: 500;
}

/* 输入框样式 */
.input-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80rpx;
  padding: 0 20rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  border: 1rpx solid #e0e0e0;
}

.placeholder {
  color: #999;
  font-size: 28rpx;
}

.selected-text {
  color: #333;
  font-size: 28rpx;
}

.arrow {
  color: #999;
  font-size: 24rpx;
}

/* 文本域样式 */
.content-textarea {
  width: 100%;
  min-height: 200rpx;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  border: 1rpx solid #e0e0e0;
  font-size: 28rpx;
  line-height: 1.5;
  box-sizing: border-box;
}

/* 图片上传区域 */
.image-upload-area {
  min-height: 200rpx;
  border: 2rpx dashed #ddd;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ff4444;
}

.upload-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
  color: #999;
}

.upload-text {
  font-size: 24rpx;
  color: #ff4444;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  padding: 20rpx;
  width: 100%;
}

.image-item {
  position: relative;
  width: 200rpx;
  height: 200rpx;
}

.uploaded-image {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
}

.delete-btn {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
}

.add-more-btn {
  width: 200rpx;
  height: 200rpx;
  border: 2rpx dashed #ddd;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
}

.add-icon {
  font-size: 60rpx;
  color: #999;
}

/* 标签样式 */
.tags-container {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.tag-item {
  display: flex;
  align-items: center;
  background-color: #e8f5e8;
  border-radius: 20rpx;
  padding: 10rpx 20rpx;
}

.tag-text {
  font-size: 24rpx;
  color: #4CAF50;
  margin-right: 10rpx;
}

.tag-delete {
  font-size: 24rpx;
  color: #999;
  font-weight: bold;
}

.tag-input {
  height: 80rpx;
  padding: 0 20rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  border: 1rpx solid #e0e0e0;
  font-size: 28rpx;
}

/* 发布按钮 */
.publish-section {
  margin: 30rpx;
  padding-bottom: 50rpx;
}

.publish-btn {
  width: 100%;
  height: 88rpx;
  background-color: #4CAF50;
  color: white;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: bold;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.publish-btn:active {
  background-color: #45a049;
}
</style>
